<template>
	<view class="userinfo" :style="{ paddingTop: paddingHeight + 'px' }">
		<nav-bar returnIcon="#fff"></nav-bar>
		<view class="header">
			<view class="text1">{{ titleList[verifyIndex].text1 }}</view>
			<view class="text2"> {{ titleList[verifyIndex].text2 }}</view>
		</view>
		<view class="content">
			<view class="c-cantainer" v-if="verifyIndex == 0">
				<image
					class="up-avatar"
					@click="chooseImage"
					:src="
						userInfo.avatar
							? userInfo.avatar
							: `${imgUrl}img/ico/at/20230828/1693212515599.png`
					"
				></image>
				<view class="avatar">头像</view>
				<view class="name">
					<u-input
						shape="circle"
						inputAlign="right"
						@input="nameInput"
						v-model="userInfo.name"
					>
						<template slot="prefix">
							<text class="prefix">姓名</text>
						</template>
					</u-input>
				</view>
				<view class="age" @click="showDate = true">
					<u-input
						shape="circle"
						inputAlign="right"
						readonly
						v-model="userInfo.birthday"
					>
						<template slot="prefix">
							<text class="prefix">出生日期</text>
						</template>
						<template slot="suffix">
							<u-icon
								name="arrow-right"
								color="#c5c5c5"
								size="12"
							></u-icon>
						</template>
					</u-input>
				</view>
				<view class="gender">
					<view
						@click="userInfo.sex = item.sex"
						:class="{ active: userInfo.sex == item.sex }"
						v-for="(item, index) in gender"
						:key="index"
						class="gender-box"
					>
						<u-icon
							bold
							:name="
								userInfo.sex == item.sex ? item.img2 : item.img
							"
							color="#333"
							size="20"
						></u-icon>
						{{ item.name }}
					</view>
				</view>
				<view class="weight" @click="handleModal('weight')">
					<u-input
						shape="circle"
						inputAlign="right"
						readonly
						v-model="userInfo.weight"
						type="digit"
					>
						<template slot="prefix">
							<text class="prefix">体重</text>
						</template>
						<template slot="suffix">
							<text class="prefix">KG</text>
						</template>
					</u-input>
				</view>
				<view @click="handleModal('height')">
					<u-input
						shape="circle"
						inputAlign="right"
						readonly
						v-model="userInfo.height"
					>
						<template slot="prefix">
							<text class="prefix">身高</text>
						</template>
						<template slot="suffix">
							<text class="prefix">CM</text>
						</template>
					</u-input>
				</view>
				<view @click="nativeShowModal = true">
					<u-input
						shape="circle"
						inputAlign="right"
						readonly
						v-model="userInfo.birthPlace"
					>
						<template slot="prefix">
							<text class="prefix">籍贯</text>
						</template>
						<template slot="suffix">
							<u-icon
								name="arrow-right"
								color="#c5c5c5"
								size="12"
							></u-icon>
						</template>
					</u-input>
				</view>
			</view>
			<view class="c-cantainer sleep-cantainer" v-if="verifyIndex == 1">
				<view @click="handleSleepModal('down')">
					<u-input
						shape="circle"
						inputAlign="right"
						readonly
						v-model="sleep"
					>
						<template slot="prefix">
							<view class="sleep-l">
								<text class="prefix">入睡时间</text>
							</view>
						</template>
						<template slot="suffix">
							<u-icon
								name="arrow-right"
								color="#1F2434"
								size="12"
							></u-icon>
						</template>
					</u-input>
				</view>
				<view @click="handleSleepModal('up')">
					<u-input
						shape="circle"
						inputAlign="right"
						readonly
						v-model="wake"
					>
						<template slot="prefix">
							<view class="sleep-l">
								<text class="prefix">起床时间</text>
							</view>
						</template>
						<template slot="suffix">
							<u-icon
								name="arrow-right"
								color="#1F2434"
								size="12"
							></u-icon>
						</template>
					</u-input>
				</view>
				<view>
					<u-input
						shape="circle"
						type="number"
						inputAlign="right"
						v-model="userInfo.heartRate"
					>
						<template slot="prefix">
							<text class="prefix">静息心率(次/min)</text>
						</template>
						<template slot="suffix">
							<u-icon
								name="arrow-right"
								color="#1F2434"
								size="12"
							></u-icon>
						</template>
					</u-input>
				</view>
				<view @click="cookbookShowModal = true">
					<u-input
						shape="circle"
						inputAlign="right"
						readonly
						v-model="cuisineName"
					>
						<template slot="prefix">
							<text class="prefix">菜系</text>
						</template>
						<template slot="suffix">
							<u-icon
								name="arrow-right"
								color="#1F2434"
								size="12"
							></u-icon>
						</template>
					</u-input>
				</view>
			</view>
			<view class="c-cantainer" v-if="verifyIndex == 2">
				<view class="check-cantainer">
					<view
						:class="{ active: userInfo.goal == item.value }"
						v-for="(item, index) in checkList"
						:key="item.value"
						@click="handleCheck(item, 'goal')"
					>
						<u-input
							shape="circle"
							inputAlign="right"
							readonly
							type="digit"
						>
							<template slot="prefix">
								<view class="check-box">
									<text class="prefix">{{ item.label }}</text>
								</view>
							</template>
						</u-input>
					</view>
				</view>
			</view>
			<view class="c-cantainer" v-if="verifyIndex == 3">
				<view class="movement">
					<view
						v-for="(item, index) in palCheckList"
						:key="item.value"
						@click="handleCheck(item, 'pal')"
						class="movement-box"
						:class="{ active: userInfo.pal == item.value }"
					>
						<u-input
							shape="circle"
							inputAlign="right"
							readonly
							type="digit"
						>
							<template slot="prefix">
								<view class="check-box">
									<text class="prefix">{{ item.label }}</text>
									<view class="palHintText">
										<view
											class="textItem"
											v-for="(
												sonItem, sonIndex
											) in item.hint"
											:key="sonIndex"
											>{{ sonItem }}
										</view>
									</view>
								</view>
							</template>
						</u-input>
					</view>
				</view>
			</view>
			<view class="next-btn" @click="next"
				>下一步{{ verifyIndex + 1 + '/4' }}</view
			>
		</view>
		<!-- 生日 -->
		<timePop
			:showDate="showDate"
			@close="showDate = false"
			@sendDate="confirmDate"
		></timePop>
		<!-- 体重 -->
		<custom-modal
			:showModal="showModal"
			:defaultWeight="defaultWeight"
			:defaultHeight="defaultHeight"
			@close="showModal = false"
			:type="type"
			@sendWeight="setWeight"
			@sendHeight="setHeight"
		></custom-modal>
		<!-- 睡觉时间 -->
		<my-datetime-picker
			:show="sleepShowModal"
			@cancel="sleepShowModal = false"
			@confirm="setTime"
			mode="time"
		></my-datetime-picker>
		<!-- 籍贯 -->
		<myPicker
			ref="uPicker"
			:show="nativeShowModal"
			:columns="provinceColumns"
			@close="nativeShowModal = false"
			closeOnClickOverlay
			@cancel="nativeShowModal = false"
			@confirm="handleNativeConfirm"
			@change="changeNative"
		>
		</myPicker>
		<!-- 心率 -->
		<myPicker
			:show="heartShowModal"
			:columns="heartColumns"
			@close="heartShowModal = false"
			closeOnClickOverlay
			@cancel="heartShowModal = false"
			@confirm="handleHeartConfirm"
			:defaultIndex="[30]"
		>
		</myPicker>
		<!-- 菜系 -->
		<myPicker
			:show="cookbookShowModal"
			:columns="cookbookColumns"
			@close="cookbookShowModal = false"
			keyName="label"
			closeOnClickOverlay
			@cancel="cookbookShowModal = false"
			@confirm="handleCookbookConfirm"
		>
		</myPicker>
	</view>
</template>

<script>
import timePop from '@/components/time-pop/index.vue'
import myPicker from '@/components/myPicker/myPicker.vue'
import myDatetimePicker from '@/components/my-datetime-picker/my-datetime-picker.vue'
import customModal from '@/components/custom-modal/index.vue'
import { ProvinceList, CityList } from '@/utils/areaJson.js'
import { getCuisineMsg } from '@/api/index.js'
export default {
	data() {
		return {
			paddingHeight: uni.getStorageSync('navbarHeight'),
			imgUrl: this.$imgUrl,
			showDate: false,
			userInfo: {
				avatar: '',
				name: '',
				birthday: '',
				sleepHour: null,
				sleepMin: null,
				wakeHour: null,
				wakeMin: null,
				weight: null,
				height: null,
				sex: 1,
				goal: null, //目的
				birthPlace: null, //籍贯
				cuisineId: null, //菜系id
				heartRate: null, //心率
				pal: null //运动强度
			},
			cuisineName: null, //菜系
			type: '',
			sleepType: '',
			showModal: false,
			sleepShowModal: false, //睡觉时间
			nativeShowModal: false, //籍贯
			heartShowModal: false, //心率
			cookbookShowModal: false, //菜系
			sleep: '00:00',
			wake: '00:00',
			defaultWeight: 65,
			defaultHeight: 175,
			gender: [
				{
					name: '男',
					sex: 1,
					key: 'man',
					img: 'http://oss.antaimedical.com/images/pro/2025/02/67a705cee4b0d615350f312cVmyseG3wNrkvd3696b0eaecc6888f4b5304854b004d2.png',
					img2: 'http://oss.antaimedical.com/images/pro/2025/02/67a70617e4b0be9d4442343a9SErRDlxo2tM296c8defdf30c27324b99d18aefc60c5.png'
				},
				{
					name: '女',
					sex: 2,
					key: 'woman',
					img: 'http://oss.antaimedical.com/images/pro/2025/02/67a7053de4b0be9d44423438DWjUxpKOAnR3accba417b295ae7a6e7a0c5610cd76b9.png',
					img2: 'http://oss.antaimedical.com/images/pro/2025/02/67a7053de4b0be9d44423438DWjUxpKOAnR3accba417b295ae7a6e7a0c5610cd76b9.png'
				}
			],
			provinceColumns: [['北京市']],
			heartColumns: [],
			cookbookColumns: [],
			checkList: [
				{ value: '1', label: '提高代谢力' },
				{ value: '2', label: '提高自愈力' },
				{ value: '3', label: '减肥' },
				{ value: '4', label: '增重' }
			],
			palCheckList: [
				{
					value: '1',
					label: '极低',
					hint: [
						'静态生活方式/坐位工作，',
						'很少或没有高强度的休闲活动'
					]
				},
				{
					value: '2',
					label: '低',
					hint: [
						'静态生活方式/坐位工作/有时需要走动或站立',
						'但很少有高强度的休闲活动'
					]
				},
				{
					value: '3',
					label: '中',
					hint: ['主要是站着或走着工作']
				},
				{
					value: '4',
					label: '高',
					hint: ['高强度职业工作或高强度，', '休闲活动方式']
				}
			],
			titleList: [
				{
					text1: '基本信息',
					text2: '让我们来认识一下您！'
				},
				{
					text1: '睡眠时间',
					text2: '此信息主要是后续的营养推荐更精准！'
				},
				{
					text1: '您的使用目的',
					text2: '此选项将影响后续的营养方案推荐和运动方案'
				},
				{
					text1: '您平时的运动强度',
					text2: '此选项将影响后续的营养方案推荐和运动方案！'
				}
			],
			verifyIndex: 0
		}
	},
	components: {
		timePop,
		myPicker,
		customModal,
		myDatetimePicker
	},
	watch: {
		'userInfo.sex': {
			handler(newVal, oldVal) {
				if (newVal == 2) {
					this.defaultWeight = 50
					this.defaultHeight = 160
				} else if (newVal == 1) {
					this.defaultWeight = 65
					this.defaultHeight = 175
				}
			}
		}
	
	},
	onReady() {
		// 微信小程序需要用此写法
		this.verifyIndex = 0
		this.$refs.datetimePicker.setFormatter(this.formatter)
	},
	mounted() {
		this.provinceColumns.unshift(ProvinceList())
		this.getCuisineMsgData()
		this.$refs.uPicker.setColumnValues(1, CityList(0)) //初始化地区选择
		let heartArr = []
		for (let index = 30; index < 100; index++) {
			heartArr.push(index)
		}
		this.heartColumns.push(heartArr)
	},
	methods: {
		// 获取菜系
		getCuisineMsgData() {
			getCuisineMsg().then((res) => {
				let arr = res.data.map((val) => {
					return {
						value: val.id,
						label: val.cuisineName
					}
				})
				this.cookbookColumns.push(arr)
			})
		},
		// 输入框事件
		nameInput(e) {
			let val = uni.$u.trim(e, 'all')
			this.$nextTick(() => {
				this.userInfo.name = val.length > 10 ? val.substr(0, 10) : val
			})
		},
		// 确定生日事件
		confirmDate(e) {
			this.userInfo.birthday = e
			this.showDate = false
		},
		chooseImage() {
			let that = this
			uni.chooseMedia({
				count: 1,
				mediaType: ['image'],
				sourceType: ['album'],
				sizeType: ['compressed'],
				success(res) {
					console.log('res', res)
					if (res.tempFiles[0].size >= 10485760) {
						uni.showModal({
							title: '提示',
							content: '请上传不大于10M的图片',
							showCancel: false
						})
					} else {
						const src = res.tempFiles[0].tempFilePath
						that.upload(src)
					}
				},
				fail(err) {
					console.log(err)
				}
			})
		},
		upload(path) {
			uni.showLoading({
				title: '上传中',
				mask: true
			})
			uni.uploadFile({
				url: 'https://antaimedical.com:5000/devicewx-upload/api/v1/upload/AliyunOss/uploadImages',
				header: {
					Authorization: `Bearer ${uni.getStorageSync('token')}`
				},
				//仅为示例，非真实的接口地址
				filePath: path,
				name: 'file',
				success: async (res) => {
					var obj = JSON.parse(res.data)
					if (obj.code == 200) {
						uni.showToast({
							title: '上传完成'
						})
						this.userInfo.avatar = obj.data
					} else {
						uni.showToast({
							title: '上传失败',
							icon: 'error',
							duration: 2000
						})
					}
				},
				complete: () => {
					uni.hideLoading()
				}
			})
		},
		// 体重身高start
		handleModal(type) {
			this.type = type
			this.showModal = true
		},
		setWeight(val) {
			this.showModal = false
			this.userInfo.weight = val
		},
		setHeight(val) {
			this.showModal = false
			this.userInfo.height = String(val)
		},
		// 体重身高end
		// 地区选择 start
		handleNativeConfirm(v) {
			this.nativeShowModal = false
			this.userInfo.birthPlace =
				v.value[0] == v.value[1] ? v.value[0] : v.value[0] + v.value[1]
		},
		changeNative(e) {
			const {
				columnIndex,
				value,
				values, // values为当前变化列的数组内容
				index,
				// 微信小程序无法将picker实例传出来，只能通过ref操作
				picker = this.$refs.uPicker
			} = e
			if (columnIndex === 0) {
				// picker为选择器this实例，变化第二列对应的选项
				picker.setColumnValues(1, CityList(index))
			}
		},
		// 地区选择 end
		// 心率确定按钮
		handleHeartConfirm(v) {
			this.heartShowModal = false
			this.userInfo.heartRate = v.value[0]
		},
		// 菜谱确定按钮
		handleCookbookConfirm(v) {
			this.cookbookShowModal = false
			this.userInfo.cuisineId = v.value[0].value
			this.cuisineName = v.value[0].label
		},

		// 睡觉时间start
		handleSleepModal(type) {
			this.sleepType = type
			this.sleepShowModal = true
		},
		setTime(val) {
			console.log(val)
			if (this.sleepType == 'down') {
				this.sleep = val.value
				this.userInfo.sleepHour = val.value.split(':')[0]
				this.userInfo.sleepMin = val.value.split(':')[1]
			} else {
				this.wake = val.value
				this.userInfo.wakeHour = val.value.split(':')[0]
				this.userInfo.wakeMin = val.value.split(':')[1]
			}
			this.sleepShowModal = false
		},
		// 睡觉时间end
		handleCheck(item, type) {
			if (type == 'goal') {
				this.userInfo.goal = item.value
			}
			if (type == 'pal') {
				this.userInfo.pal = item.value
			}
		},
		formatter(type, value) {
			if (type === 'year') {
				return `${value}年`
			}
			if (type === 'month') {
				return `${value}月`
			}
			if (type === 'day') {
				return `${value}日`
			}
			return value
		},
		next() {
			let arr = [
				{
					avatar: '请上传头像',
					name: '请填写名称',
					birthday: '请完善生日',
					weight: '请填写体重',
					height: '请填写身高',
					sex: '请选择性别',
					birthPlace: '请填写籍贯' //籍贯
				},
				{
					sleepHour: '请填写睡眠时间',
					sleepMin: '请填写睡眠时间',
					wakeHour: '请填写起床时间',
					wakeMin: '请填写起床时间',
					heartRate: '请填写心率', //心率
					cuisineId: '请选择菜系' //菜系id
				},
				{
					goal: '请选择使用目的' //目的
				},
				{
					pal: '请选择运动强度' //运动强度
				}
			]
			let verify = arr[this.verifyIndex]
			for (const key in verify) {
				const element = this.userInfo[key]
				if (!element) {
					return uni.showModal({
						title: '',
						content: verify[key],
						showCancel: false,
						confirmColor: '#1F2434'
					})
				}
			}
			if (this.verifyIndex == 3) {
				uni.navigateTo({
					url: `/pagesB/login/info/userInfoView?userInfo=${JSON.stringify(
						this.userInfo
					)}`
				})
                return
			}
			this.verifyIndex++
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #f7f7f7;
}
</style>
<style lang="scss" scoped>
.userinfo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	// padding: 0 48rpx 144rpx;
	background: #1f2434;
	.header {
		padding: 0 48rpx;
		width: 100%;
		.text1 {
			margin-top: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 38rpx;
			color: #ffffff;
			text-align: left;
		}
		.text2 {
			margin-top: 10rpx;
			margin-bottom: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: rgba($color: #fff, $alpha: 0.85);
			text-align: left;
		}
	}
	.content {
		height: calc(100vh - 320rpx);
		width: 100%;
		padding: 58rpx 48rpx 0 48rpx;
		background: #ffffff;
		border-radius: 23rpx 23rpx 0rpx 0rpx;
		.avatar {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #1f2434;
			margin-bottom: 58rpx;
		}
	}

	.title {
		width: 100%;
		font-size: 48rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-top: 88rpx;
		text-align: left;
	}

	.line {
		width: 100%;
		border-bottom: 2rpx dashed #fff;
		margin: 62rpx 0;
	}

	.hint {
		width: 100%;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		line-height: 34rpx;
		text-align: left;
		margin-top: 8rpx;
	}

	.up-avatar {
		width: 108rpx;
		height: 108rpx;
		border-radius: 50%;
	}

	.c-cantainer.sleep-cantainer {
		margin-top: 0 !important;

		/deep/.u-input {
			background-color: #ebebeb;
		}

		.sleep-l {
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.prefix {
			font-size: 28rpx;
			color: rgba($color: #1f2434, $alpha: 1);
		}
	}

	.c-cantainer {
		// margin-top: 48rpx;
		width: 100%;

		/deep/.u-input {
			padding: 0 32rpx 0 !important;
			height: 88rpx;
			background-color: #f3f4f7;
			margin-top: 38rpx;

			.u-input__content {
				line-height: 88rpx !important;
			}
		}
		/deep/.u-border {
			border: 0;
		}
		/deep/.u-input--circle {
			border-radius: 24rpx !important;
		}

		.prefix {
			font-size: 28rpx;
			color: rgba($color: #1f2434, $alpha: 0.5);
		}
	}

	.gender {
		width: 100%;
		margin-top: 48rpx;
		display: flex;
		align-items: center;

		.gender-box {
			margin-right: 68rpx;
			font-size: 28rpx;
			color: #1f2434;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 135rpx;
			height: 69rpx;
			background: #f3f4f7;
			border-radius: 35rpx;
			background: #f3f4f7;

			/deep/.u-icon {
				margin-right: 12rpx;
			}
		}

		.active {
			color: #fff;
			background: #1f2434;

			/deep/.u-icon {
				text {
					color: #fff !important;
				}
			}
		}
	}
	.check-cantainer {
		.active {
			/deep/.u-input {
				background-color: #1f2434;
			}
			.prefix {
				color: #fff;
			}
		}
	}
	.movement {
		.movement-box {
			border-radius: 24rpx;
			height: 120rpx;
			background-color: #f3f4f7;
			.check-box {
				display: flex;
				justify-content: center;
				align-items: center;
				.prefix {
					width: 136rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #1f2434;
					text-align: center;
				}
				.palHintText {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: rgba(31, 36, 52, 0.8);
					text-align: left;
					.textItem {
						line-height: 32rpx;
						text-align: left;
					}
				}
			}
			/deep/.u-input {
				height: 120rpx;
				padding: 12rpx 0 !important;
				.u-input__content {
					line-height: 120rpx !important;
				}
			}
		}
		.active {
			.prefix,
			.palHintText {
				color: #fff !important;
			}
			/deep/.u-input {
				background-color: #1f2434;
			}
		}
		/deep/.u-border {
			border: 0;
		}
	}
	.next-btn {
		margin: 0 auto;
		width: 423rpx;
		height: 85rpx;
		margin-top: 64rpx;
		background: #1f2434;
		border-radius: 44rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #ffffff;
		line-height: 50rpx;
		text-align: left;
		font-style: normal;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
</style>
